<script setup lang="ts">
import {GreetService} from "../../../bindings/quant/backend/service";
import {ref} from "vue";
import {NButton} from "naive-ui";

const name = ref<string>('')
const result = ref<string>('Please enter your name below 👇')

const doGreet = () => {
  let localName = name.value;
  if (!localName) {
    localName = 'anonymous';
  }
  GreetService.Greet(localName).then((resultValue) => {
    result.value = resultValue;
  }).catch((err) => {
    console.log(err);
  });
}
</script>

<template>
  <n-flex>
    <n-space vertical>
      <div class="result">
        <n-tag>{{ result }}</n-tag>
      </div>
      <div class="card">
        <n-space>
          <n-input-group>
            <n-input-group-label>名字</n-input-group-label>
            <n-input class="input" v-model:value="name" type="text" autocomplete="off" placeholder="请输入名字"/>
            <n-button type="primary" tertiary @click="doGreet">Hello</n-button>
          </n-input-group>
        </n-space>
      </div>
    </n-space>
  </n-flex>
</template>

<style scoped>

</style>